<!--充值和提现-->
<template>
	<view class="hdtybox" :class="hdc" style="padding-top: 0;">
		<topboxVue :tit="$t('page3.title')"></topboxVue>
		<view class="txbox">
			<view class="txbox-chbox">
				<view class="txbox-chbox-l bj_center" :class="nows == 1 ? 'txbox-chbox-lo' : ''" @click="chs(1)">
					{{$t("page3.ch1")}}
				</view>
				<view class="txbox-chbox-r bj_sx" :class="nows == 2 ? 'txbox-chbox-ro' : ''" @click="chs(2)">
					{{$t("page3.ch2")}}
				</view>
			</view>

			<czVue v-if="nows == 1"></czVue>
			<txVue v-if="nows == 2"></txVue>



		</view>

		<view class="czgc bj_center" v-if="showgc">
			<view class="czgc-gcbox">
				<view class="bj_between czgc-gcbox-gctit">
					<view class="czgc-gcbox-gctit-xx">

					</view>
					<view class="f36">
						{{$t("cz.gc.tit1")}}
					</view>
					<image src="/static/xx.png" class="czgc-gcbox-gctit-xx" @click="clgc"></image>
				</view>
				<view class="czgc-gcbox-gctxtb">
					<view class="fwb mb20">
						{{$t("cz.gc.tit2")}}
					</view>
					<view class="mb20" v-html="$t('cz.gc.txt1')"></view>
					<view class="fwb mb20">
						{{$t("cz.gc.tit3")}}
					</view>
					<view class="mb20" v-html="$t('cz.gc.txt2')"></view>
					<view class="fwb mb20">
						{{$t("cz.gc.tit4")}}
					</view>
					<view class="mb20" v-html="$t('cz.gc.txt3')"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import common from '../../js/common';
	import czVue from '../p3/cz.vue';
	import txVue from '../p3/tx.vue';
	const {
		t
	} = useI18n()
	provide("repage", repage);
	provide("clgc", clgc);
	provide("opgc", opgc);

	let showgc = ref(false)
	let hdc = ref("hdpagein2")
	let nows = ref(1)

	onLoad(function(e) {
		if (e.v) {
			chs(e.v)
		} else {
			chs(1)
		}


	})

	function chs(v) {
		nows.value = v
	}

	function repage() {
		if (getCurrentPages().length == 1) {
			uni.switchTab({
				url: "/pages/index/index"
			})
		} else {
			uni.navigateBack()
		}

	}

	function clgc() {
		showgc.value = false
	}

	function opgc() {
		showgc.value = true
	}
</script>

<style scoped lang="scss">
	.txbox {
		padding: 20rpx;

		&-chbox {
			position: relative;
			height: 92rpx;
			margin-bottom: 20rpx;

			&-l {
				position: absolute;
				left: 0;
				top: 0;
				width: 372rpx;
				height: 92rpx;
				color: #A2B5D5;
				background: url("/static/s1.png") no-repeat center center;
				background-size: 100% 100%;
				font-weight: bold;
			}

			&-lo {
				color: #fff;
				background: url("/static/s1o.png") no-repeat center center;
				background-size: 100% 100%;
			}

			&-r {
				position: absolute;
				top: 0;
				right: 0;
				width: 372rpx;
				height: 92rpx;
				background: url("/static/s2.png") no-repeat center center;
				background-size: 100% 100%;
				color: #A2B5D5;
				font-weight: bold;
			}

			&-ro {
				color: #fff;
				background: url("/static/s2o.png") no-repeat center center;
				background-size: 100% 100%;
			}
		}
	}

	.czgc {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		/* 100% 相对于 #app 的宽度 */
		height: 100vh;
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		background: rgba(0, 0, 0, 0.5);
		z-index: 9999;

		&-gcbox {
			width: 698rpx;
			background: linear-gradient( 180deg, #007628 0%, #177747 100%);
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			&-gctit {
				width: 698rpx;
				height: 112rpx;
				line-height: 112rpx;
				background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				padding: 0 30rpx;

				&-xx {
					width: 40rpx;
					height: 40rpx;
				}
			}

			&-gctxtb {
				padding: 30rpx 20rpx;
				font-size: 26rpx;
			}
		}

	}
</style>